<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车 - 超市系统</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/cart.css">
    <link rel="stylesheet" href="styles/modal.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="icon" href="/photo/Profile picture/log.ico" type="image/x-icon">
</head>

<body>
    <main>
        <header id="header">
            <nav>
                <div class="logo-container">
                    <img src="/photo/Profile picture/logo.png" alt="超市Logo" class="logo">
                    <div class="brand-name">超级<span>市场</span></div>
                </div>

                <ul class="nav-links">
                    <li><a href="index-ai.html"><i class="fas fa-home"></i> 首页</a></li>
                    <!-- <li><a href="menu.html"><i class="fas fa-list"></i> 商品列表</a></li> -->
                    <li><a href="order.html"><i class="fas fa-shopping-bag"></i> 我的订单</a></li>
                    <li><a href="cart.html"><i class="fas fa-shopping-cart"></i> 购物车</a></li>
                    <li class="user-info" style="background-color: rgb(51, 51, 51);">
                        <div class="user-avatar-container">
                            <div class="user-avatar">
                                <img id="userAvatar" :src="userAvatarUrl" alt="用户头像">
                            </div>
                            <span id="username" class="user-name" style="color: black;">{{username}}</span>
                            <div class="avatar-dropdown">
                                <a href="/profile.html" target="_blank" id="profileBtn" class="dropdown-item">
                                    <i class="fas fa-user"></i> 个人信息
                                </a>
                                <a href="/login.html" id="logoutBtn" class="dropdown-item">
                                    <i class="fas fa-sign-out-alt"></i> 退出
                                </a>
                            </div>
                        </div>
                    </li>
                </ul>
            </nav>
        </header>
        <div class="cart-container" id="app">
            <h2>我的购物车</h2>
            <div class="select-all">
                <input type="checkbox" id="selectAll" v-model="isSelectAll">
                <label for="selectAll">全选</label>
            </div>
            <div class="cart-items">
                <div class="cart-item" v-for="item in cartItems.commodityList" :key="item.commodityId">
                    <div class="item-checkbox">
                        <input type="checkbox" v-model="item.selected">
                    </div>
                    <img :src="item.image" :alt="item.commodityName">
                    <div class="item-details">
                        <!-- <div class="item-name">{{ item.commodityName }}</div> -->
                        <div class="item-name">
                            {{ item.commodityName }}
                            <span v-if="item.specProduct" class="item-specs">
                                (
                                <span v-for="(spec, idx) in getSpecArray(item.specProduct)" :key="idx">
                                    {{ spec }}<span v-if="idx < getSpecArray(item.specProduct).length - 1">，</span>
                                </span>
                                )
                            </span>
                            <span v-else-if="item.specs" class="item-specs">({{ item.specs }})</span>
                            <span v-else-if="item.spec1 || item.spec2" class="item-specs">
                                ({{ item.spec1 }}{{ item.spec1 && item.spec2 ? ',' : '' }}{{ item.spec2 }})
                            </span>
                        </div>
                        <div class="item-price">¥{{ item.commoditySalePrice }}</div>
                    </div>
                    <div class="quantity-controls">
                        <button class="quantity-btn" @click="decreaseQuantity(item)">-</button>
                        <span class="quantity">{{ item.commodityNum }}</span>
                        <button class="quantity-btn" @click="increaseQuantity(item)">+</button>
                    </div>
                    <button class="remove-btn" @click="removeItem(item.commodityId)">删除</button>
                </div>
                <div v-if="cartItems.length === 0" style="color:#c03838;text-align:center;">购物车为空</div>
            </div>
            <div class="cart-summary">
                <div class="total">
                    总计: <span id="totalAmount">¥{{ sum }}</span>
                </div>
                <button style="border: none;" class="checkout-btn" @click="checkout">
                    <span class="settlement">结算</span>
                </button>
            </div>
        </div>
    </main>
    <script src="js/vue.js"></script>
    <script src="/js/jquery-1.12.4.min.js"></script>
    <script src="js/cart.js"></script>
    <script src="js/header.js"></script>
</body>

</html>